<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <input type="button" value="添加数据" @click="add"></input>
    <input type="button" value="移除数据" @click="remove"></input>
<ul>
    <li v-for="item in arr">
        黑马程序员校区{{item }}
    </li>
    <p v-for="item in tell" :title="item.name">{{item.name}}</p>
</ul>


</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","深圳",],
            tell:[
                {name:"JohnWick"},
                {name:"是一个杀手"}
            ]

        },
        methods:{
            add:function () {
                this.tell.push({name:"蛋炒饭"});

            },
            remove:function () {
                this.tell.shift();

            }

        }
    })
</script>
</body>
</html>
